<template>
    <div class="login-container">
        <el-form 
        ref="loginFormRef" 
        :model="form" 
        label-width="80px" 
        class="login-form" 
        :rules="rules">
        <h2 class="login-title">登录</h2>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" type="password"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(loginFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
let $router=useRouter()
import useUserStore from '@/store/modules/user';
let useStore=useUserStore()

import { ElMessage } from 'element-plus';
const loginFormRef = ref()

const form = reactive({
    username: '',
    password: ''
});
//用户名自定义校验规则  rule规则，value:输入框输入的内容，callback如果
//校验失败就创建错误对象作为参数传入进去，从而提示，如果校验成功则直接调用ca11back即可表示通过

// const ruleFormRef=ref<FormInstance>()

const validateUserName=(_rule:any,value:any,callback:any)=>{
    value=value.trim()
    //获取输入内容长度
    const length=value && value.length;
    //正则表达式
    const pwdReg=/^[a-zA-Z0-9_]+$/
    if(value ===''){
        callback(new Error('请输入账号'))
    }
    else if(length<4 || length>12){
        callback(new Error('长度必须在4到12位'))
    }
    else if(!pwdReg.test(value)){
        callback(new Error('账号必须是英文、数字或下划线组成'))
    }
    else{
        callback()
    }
}
//表单校验
const rules = reactive<FormRules>({
    username: [
        { required: true, validator: validateUserName, trigger: ['blur', 'change'] },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: ['change', 'blur'],
        },
    ],
})
const onSubmit = (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        formEl.validate(async (valid) => {
            if (valid) {
                try{
                    await useStore.userLogin(form)
                    $router.push("/")
                    ElMessage({
                        type:'success',
                        message:'登录成功'
                    })
                }catch (error){
                    ElMessage({
                        type:'error',
                        message:(error as Error).message
                    })
                } 
            } else {
            }
        })
    }
</script>
<style scoped>
.login-form {
    width: 350px;
    margin: 160px auto;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 20px;
}

.login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../../assets/1.jpg');
    overflow: hidden;
}

.login-title {
    text-align: center;
    color: #303133;
}
</style>